<template>
  <KView class="retreat-reason-checkbox clearfix">
    <KView v-for="reason in reasonList" :key="reason" :class="{'select':value.indexOf(reason)!==-1}" @click="reasonClick(reason)">
      <span>{{reason}}</span>
    </KView>
  </KView>
</template>

<script>
  import GoodsOrderData from 'models/goodsOrder/goodsOrderData';

  export default {
    props: {
      value: {
        type: Array,
        required: true
      }
    },

    data() {
      return {
        reasonList: GoodsOrderData.reasonList
      };
    },

    methods: {
      reasonClick(reason) {
        let value = this.value;
        let index = value.indexOf(reason);
        if (index > -1) {
          value.splice(index, 1);
        } else {
          value.push(reason);
        }
        this.$emit('change', value);
      }
    }
  };

</script>

<style lang="scss">
  .retreat-reason-checkbox {
    font-size: formatPx(26);
    padding-left: formatPx(30);
    padding-right: formatPx(15);

    >div {
      float: left;
      height: formatPx(64);
      line-height: formatPx(64);
      padding: 0 formatPx(34);
      background: #f5f5f5;
      color: #999999;
      margin-right: formatPx(15);
      margin-bottom: formatPx(15);
      border-radius: 8px;

      &.select {
        color: #ffffff;
        background: #59c264;
      }
    }
  }

</style>
